import React from "react";
import { Button, Image, Table } from "antd";
import { useTable } from "../hooks";
import "./movie_detail.css";
import { format } from "../../module/module"
import { baseurl } from "../ajax";
import { Link } from "react-router-dom"

const Column = Table.Column;

export function MovieDetail(props) {
    const movie = props.location.state ? props.location.state.movie : JSON.parse(sessionStorage.getItem("click-movie"));
    return (
        <>
            <div className="movie-detail-box">
                <div className="filter">
                    <div className="movie-bg"></div>
                </div>
                <div className="inform-box flex">
                    <Image
                        width={200}
                        height={280}
                        src={movie.cover ? movie.cover : "error"}
                        style={{ border: "3px solid #fff", marginRight: 20, boxShadow: "0 10px 10px 0 #eee" }}
                        fallback=""
                    />
                    <div className="movie-detail-inform" style={{ fontSize: 16, position: "relative" }}>
                        <div className="movie-detail-title">{movie.title}</div>
                        <div>{movie.type.join(" ")}</div>
                        <div>
                            <span>{movie.area.join(" ")}</span>
                            <span>/</span>
                            <span>{movie.filmlen}分钟</span>
                        </div>
                        <div>{format(new Date(movie.releaseDate), "yyyy-MM-dd")}上映</div>
                        <a href={"#schedules"}><Button block type="primary" style={{ position: "absolute", top: 200 }}>特惠购票</Button></a>
                    </div>
                </div>
            </div>
            <div style={{width: 1000, margin: "auto"}}>
                <div
                    style={{
                        borderBottom: "3px solid tomato",
                        margin: "0 auto 20px",
                        fontSize: 20,
                        color: "tomato"
                    }}
                >
                    剧情介绍
            </div>
                <div>{movie.introduction}</div>
            </div>

            <ScheduleList movie={movie} />
        </>
    )
}


function ScheduleList(props) {
    return (
        <div style={{ width: 1000, margin: "100px auto 200px" }}>
            <ScheduleTable movie={props.movie} />
        </div>
    )
}

const ScheduleTable = (props) => {
    const initFormValues = {
        movieId: props.movie.mid,
        sortName: "startTime",
        sortRule: "up",
        page: 1,
        pageLimit: 999
    };
    const table = useTable(baseurl + "/ttms/schedule/userQuery", initFormValues, (data) => {
        if (data.dataSource) {
            data = {
                sum: 0,
                schedule: []
            };
        } else {
            data.schedule = data.schedule.map((value) => {
                if (typeof value.startTime === "number" && typeof value.endTime === "number") {
                    value.startTime = format(new Date(value.startTime), "yyyy-MM-dd hh:mm:ss")
                    value.endTime = format(new Date(value.endTime), "yyyy-MM-dd hh:mm:ss")
                }
                return value;
            })
        }
        return data;
    });

    const save = function (value) {
        if (sessionStorage.getItem("user-token") || localStorage.getItem("user-token")) {
            sessionStorage.setItem("sellTicketScheduleAndMovie", JSON.stringify(value))
        } else {
            sessionStorage.setItem("back", window.location.pathname);
            window.location = "../login";
        }
    }

    return (
        <Table
            dataSource={table.data ? table.data.schedule : []}
            loading={table.loading}
            pagination={false}
            size="middle"
            rowKey={"scheduleId"}
            id="schedules"
        >
            <Column title="电影名称" dataIndex="movieName" />
            <Column title="开始时间" dataIndex="startTime" />
            <Column title="单价" dataIndex="ticketPrice" />
            <Column title="" key="Action" align="right" render={(_, record) => {
                return (<Link to={{ pathname: "./selectTicket", state: { schedule: record, movie: props.movie } }}
                    onClick={save.bind(this, { schedule: record, movie: props.movie })}
                >
                    <Button type="primary" size="middle" >选票</Button>
                </Link>)
            }} />
        </Table>
    )
}